<style scoped>
.resource-wrapper {
    width: 1464px;

}
header {
    padding: 30px;
    box-sizing: border-box;
    background-color: #FFF;
}
.operation {
    display: flex;
    justify-content: space-between;
}

.section-item {
    display: flex;
    align-items: center;
    margin-top: 30px;
    color: #7485B1;
    font-size: 14px;

    & > span {
        margin-right: 40px;
    }

    & ul {
        flex: 1;
        display: flex;
        background: linear-gradient(to right, #E1E7EB 50%, #FFF 50%);
        background-repeat: repeat-x;
        background-position: left bottom;
        background-size: 10px 1px;
    }

    & li {
        padding: 0 16px;
        line-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        border-top: 3px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    & li.selected {
        color: #7485B1;
        border-top-color: #3577FB;
        border-left-color: #E1E7EB;
        border-right-color: #E1E7EB;
        background-color: #FFF;
        transform: translateY(1px);
    }
}

.list {
    margin-top: 10px;

    & li {
        display: inline-block;
        width: calc((1464px - 40px) / 5);
        padding: 34px 14px 20px;
        margin-bottom: 10px;
        margin-right: 8px;
        position: relative;
        box-sizing: border-box;
        color: #666a80;
        vertical-align: top;
        cursor: pointer;
        background-color: #FFF;
        transition: all .3s;
    }

    & li:hover {
        box-shadow: 0 0 20px rgba(72, 96, 112, .16);

        & .mask {
            opacity: 1;
        }
    }

    & i {
        padding: 2px 6px 2px 12px;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        font-size: 12px;
        font-style: normal;
        background-color: #3f66f6;

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 100%;
            border: 11px solid transparent;
            border-left: 11px solid #3f66f6;
        }
    }

    & img {
        display: block;
        width: 150px;
        height: 190px;
        margin: 0 auto 37px;
        object-fit: cover;
    }

    & .title {
        display: block;
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    & .mask {
        width: 100%;
        height: 68%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        background-color: rgba(116, 133, 177, .4);
        transition: all .3s;

        & .icon-wrapper {
            width: 5px;
            height: 20px;
            padding: 10px;
            position: absolute;
            top: 30px;
            right: 30px;
        }

        & .icon {
            display: block;
            width: 5px;
            height: 5px;
            margin: 3px 0;
            border-radius: 50%;
            background-color: #FFF;
        }

        & .setting {
            width: 168px;
            position: absolute;
            top: 20px;
            right: 20px;
            box-sizing: border-box;
            line-height: 48px;
            background-color: #FFF;

            &::before {
                content: "\e633";
                padding: 0 15px;
                color: #828598;
                font-family: "iconfont" !important;
            }
        }
    }
}
.footer {
    display: flex;
    margin-top: 20px;

    & .num {
        color: #ff8c35;
    }

    & .view-num {
        margin-left: auto;
    }
}
.no-data {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 100px auto;
    color: #999;

    & img {
        width: 230px;
        margin-bottom: 15px;
    }
}
.sub-classify {
    margin-top: 12px;
    margin-left: 80px;

    & span {
        margin-right: 30px;
        color: #7485B1;
        font-size: 14px;
        cursor: pointer;
    }

    & span.active {
        color: #3577FB;
    }
}
.loading {
    width: 40px;
    height: 40px;
    margin: 150px auto 0;
    background: url() no-repeat;
    background-size: 100%;
}

</style>
<style>
    .res-dialog {
    display: flex;
    align-items: center;


    & .el-dialog {
        margin-top: 0;
        width: 720px;
        padding: 30px;
        box-sizing: border-box;
    }

    & .tit {
        margin-bottom: 17px;
        text-align: center;
        line-height: 44px;
        background-color: #F4F7FD;
    }

    & .el-tree {
        height: 200px;
        overflow: auto;
    }

    & .el-dialog__body {
        padding-top: 22px;
    }

    & .el-dialog__footer {
        padding-top: 32px;
        border-top: 1px solid #E1E7EB;
    }

    & .no-border {
        border: none;
    }
}
</style>

<template>
    <div class="resource-wrapper">
        <header>
            <div class="operation">
                <el-button type="primary" class="showdow" @click="addResource">创建资源</el-button>
                <el-input placeholder="请输入名称/作者/讲师" suffix-icon="el-icon-search" class="search" v-model="searchContent" @keyup.native.enter="search"></el-input>
            </div>

            <div class="section-item">
                <span>类型：</span>
                <ul>
                    <li :class="{selected: cateId === item.ResTypeID}" v-text="item.ResTypeName" v-for="(item, index) of classify" @click="selectCate(item, index)"></li>
                </ul>
            </div>

            <p class="sub-classify" v-if="subClassify.length">
                <span :class="{active: cateIdSub === item.ResTypeID}" v-for="item of subClassify" v-text="item.ResTypeName" @click="selectSubCate(item)"></span>
            </p>

            <div class="section-item">
                <span>类别：</span>

                <el-checkbox-group v-model="checkList" @change="changeKindList">
                    <el-checkbox v-for="item of kindList" :label="item.ResSubCateID" :key="item.ResSubCateID">{{item.CateName}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </header>

        <ul class="list" v-if="list.length">
            <li class="book-item" v-for="(item, index) of list" @click="redirect(item)">
                <i v-text="item.CateName"></i>
                <img :src="item.ResCover">
                <p class="title" v-text="item.ResName"></p>
                <span class="title">{{item.Author}}著</span>
                <div class="footer">
                    剩余分配：

                    <span class="num">{{item.Stocks == '0' ? '不限' : item.Stocks+'份'}}</span>
                    <!-- <span class="view-num">{{item.ViewNum}}人查阅</span> -->
                </div>
                <div class="mask">
                    <div class="icon-wrapper" v-if="! item.isShowSetting" @click.stop="show(item, index)">
                        <span class="icon"></span>
                        <span class="icon"></span>
                        <span class="icon"></span>
                    </div>
                    <div class="setting iconfont" v-else @click.stop="showDialog(item)">移动分类</div>
                </div>
            </li>
        </ul>
        <p class="no-data" v-if="noData">
            <img src="../../images/ic-default.png" alt="暂无数据">
            <span>没有符合条件的书籍，请尝试其它搜索内容</span>
        </p>
        <p class="loading" v-if="loading"></p>

        <pageModel class="pages newPage" :total="total" :page="page" :pageSize="pageSize" @changePageSize="changePageSize" @changePage="changePage"></pageModel>

        <el-dialog title="移动分类" :top="0" class="res-dialog" :visible.sync="status">
            <p class="tit">移动分类</p>

            <el-tree :data="resTree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

            <div slot="footer">
                <el-button type="text" class="no-border" @click="status = false">取消</el-button>
                <el-button type="primary" class="showdow" @click="dialogConfirm">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'

    import '@/css/components/button.css'
    import pageModel from '@/components/pageModel.vue'
    import com from 'js/common.js'

    export default {
        data() {
            return {
                path: [
                    {
                        'name':'资源管理',
                        'path':'/resource/book-list'
                    },
                    {
                        'name':'我的资源'
                        // 'path':'/resource/my-resource'
                    }
                ],

                loading: true,
                loaded: false,

                cateId: -1,
                cateIds: '',
                cateIdSub: '',

                classify: [],
                subClassify: [],

                checkList: [],
                kindList: [],

                page: 1,
                pageSize: 20,
                total: 0,
                list: [],

                status: false,

                defaultProps: {
                    children: 'child',
                    label: 'ResTypeName'
                }
            }
        },

        components: {
            pageModel
        },

        computed: {
            noData() {
                return this.loaded && ! this.list.length
            },
            resTree() {
                return this.classify.slice(1)
            }
        },

        watch: {
            cateId(value) {
                //console.log(value)
                this.cateIdSub = ''

                if (value === -1) {
                    this.cateIds = ''
                } else if (value === -2) {
                    this.cateIds = '0'
                } else {
                    this.cateIds = this.subClassify.map((item) => item.ResTypeID).join()
                }

                this.$noChild = false
                this.classify.forEach((item) => {
                    if (item.ResTypeID === value && value !== -1 && value !== -2) {
                        if (! item.child.length) {
                            this.$noChild = true
                        }
                    }
                })

                this.getList()
            }
        },

        created() {
            this.getClassify()
            this.getClassifyType()

            this.getList()

            this.$clickFun = () => {
                if (typeof this.$index !== 'undefined') {
                    this.list[this.$index].isShowSetting = false
                }
            }

            document.body.addEventListener('click', this.$clickFun, false)


            this.$store.commit('setPath', this.path)
        },

        destroyed() {
            document.body.removeEventListener('click', this.$clickFun, false)
            this.$clickFun = null
        },

        methods: {
            addResource() {
                this.$router.push(`/resource/add-resource`)
            },

            redirect({ComResID, ResSubCateID}) {
                if( ResSubCateID == 0) {
                    this.$router.push(`/resource/upload-info?ComResID=${ComResID}`)
                } else {
                    this.$router.push(`/resource/book-info?ResID=${ComResID}`)
                }

            },
            handleNodeClick(value) {

                delete this.$resValue

                if (typeof value.child === 'undefined') {
                    this.$resValue = value
                }

            },
            showDialog(item) {
                item.isShowSetting = false
                this.status = true

                this.$ComResID = item.ComResID
            },
            async dialogConfirm() {
                if (! this.$resValue) {
                    this.$message('请选择子类型')

                    return
                }

                const params = {
                    comResID: this.$ComResID,
                    resTypeID: this.$resValue.ResTypeID
                }
                const {data} = await axios.post('/com/com-res/classifyComRes', qs.stringify(params))

                if (data.flag === 1) {
                    console.log(data)

                    location.reload()
                } else {
                    alert(data.msg)
                }
            },
            selectSubCate(item) {
                this.cateIds = item.ResTypeID
                this.cateIdSub = item.ResTypeID

                this.getList()
            },
            selectCate(item, index) {
                this.subClassify = []
                this.cateId = item.ResTypeID

                if (item.ResTypeID !== -1 && item.ResTypeID !== -2) {
                    this.subClassify = this.classify[index].child
                }
            },
            async getClassify() {
                const {data} = await axios.post('/com/res-cates/comResTypeTree')

                if (data.flag === 1) {
                    this.classify = [{ResTypeID: -1, ResTypeName: '全部'}].concat(data.data)

                    this.classify.push({
                        ResTypeID: -2,
                        ResTypeName: '未分类'
                    })

                    this.cateId = this.classify[0] && this.classify[0].ResTypeID
                } else {
                    alert(data.msg)
                }
            },
            async getClassifyType() {
                const {data} = await axios.post('/com/res-cates/comResTypeList')

                if (data.flag === 1) {
                    this.kindList = data.data.ResCateList
                    this.kindList.push({
                        CateName: '自定义',
                        ResSubCateID: -1
                    })
                } else {
                    alert(data.msg)
                }
            },
            changePageSize(value) {
                this.pageSize = value

                this.getList()
            },
            changePage(value) {
                this.page = value

                this.getList()
            },
            changeKindList(value) {
                const $value = value.slice()

                const index = $value.findIndex((item) => item === -1)

                this.$cou = false

                if (index !== -1) {
                    this.$cou = true
                    $value.splice(index, 1)
                }

                this.$types = $value.join()

                this.getList()
            },
            show(item, index) {
                this.$index = index
                item.isShowSetting = true
            },
            search() {
                if (this.searchContent) {
                    this.getList()
                }
            },
            async getList() {
                const params = {
                    page: this.page,
                    pagesize: this.pageSize
                }

                if (this.cateIds) {
                    params.resTypeIDs = this.cateIds
                }

                if (this.searchContent) {
                    params.enter = this.searchContent
                }

                if (this.$types) {
                    params.resSubCateIDStr = this.$types
                }

                if (this.$cou) {
                    params.userDefined = 1
                }

                if (this.$noChild) {
                    params.typeHasChild = 0
                }

                //this.total = 0
                this.loading = true
                this.loaded = false
                this.list = []

                const {data} = await axios.post('/com/com-res/comResourceList', qs.stringify(params))

                if (data.flag === 1) {
                    this.loaded = true
                    this.loading = false

                    this.list = data.data.Row.map((item) => {
                        item.isShowSetting = false

                        return item
                    })

                    let imgArr = [];
                    this.list.forEach(item=>{
                        imgArr.push({url: item.ResCover,param:'image/resize,m_fixed,h_300,w_400'})
                    });

                    com.getFullOssFiles(imgArr,(fullUrlArr)=>{
                        this.list.forEach((item,index)=>{
                            item.ResCover = fullUrlArr[index]
                        });
                    })


                    this.total = data.data.Total


                } else {
                    alert(data.msg)
                }
            }
        }
    }
</script>
